<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * { padding: 0; margin: 0; }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }
        tbody tr {
            background-color: #f0f0f0;
        }
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
        table{
            float: left;
            margin: 0 20px;
        }
    </style>
</head>
<body>
    <table border="1" class="table">
    </table>
    <select name="" id="" class="select1" onchange="fun()">
        
    </select>
    <select name="" id="" class="select2" ></select>
    <script>
        //  var o = new String(str);
        // var str = 'abcde';//值
        // var aa="abc";
        // var a=str || o && aa;
        // console.log(a);
        // function newToString() {
        //     return 'Hello world';
        // }
        // function func(val) {
        //     //将val的toString函数替换成newToString函数
        //     val.toString = newToString;
        // }
        // //值类型无法替换
        // func(str);
        // alert(str);
        // func(o);
        // alert(o);
        // var obj=new Object();
        // obj.name="temo";
        // obj.age=18;
        // with(obj){
        //     name="德玛";
        //     age=40;

        // }
        // var a;
        // a=1,2,3;
        // alert(a);





        
        var prov=[
            ['湖南','长沙','郑州','湘潭'],
            ['江西','宜春'],
            ['广东','深圳'],
            ['北京','东城区','西城区','崇文区','宣武区','朝阳区','丰台区','石景山区','海淀区','门头沟区','房山区','通州区','顺义区','昌平区','大兴区','怀柔区','平谷区','密云县','延庆县']
        ]
        var cc="";
        var select1=document.querySelector(".select1");
        var select2=document.querySelector(".select2");
        for(var i=0;i<prov.length;i++){
            cc+="<option value="+prov[i][0]+">"+prov[i][0]+"</option>";
        }
        select1.innerHTML=cc;
        function fun(){
           var  myselect=document.querySelector(".select1");
           var dancer1=myselect.options[myselect.selectedIndex].value;//获取选择的value值
           var dancer2=myselect.value;
           var oo="";
          for(let ii=0;ii<prov.length;ii++){
              if(dancer2==prov[ii][0]){
                  for(let iii=1;iii<prov[ii].length;iii++){
                    oo+="<option value="+prov[ii][iii]+">"+prov[ii][iii]+"</option>";
                  }
              }
          }
          select2.innerHTML=oo;
        }




       
        // var table=document.querySelector(".table");
        // console.log(table);
        // var tab="";
       
        // var b=[
        //     [1,2,3,4],
        //     [2,3,4,5],
        //     [3,4,5,6],
        //     [4,5,6,7],
        // ]
        // for(var i=0;i<b.length;i++){
        //     tab+="<tr>";
        //     for(var a=0;a<b[i].length;a++){
        //         console.log(b[i][a]);
        //         tab +="<td>"+b[i][a]+"</td>";
        //     }
        //     tab+="</tr>";
        // }
        // table.innerHTML =tab;
    </script>
</body>
</html>